<template>
	<div class="container">
		<div class="id" @click="showRoomMembers">{{ build ? build + ' 栋' : '' }} {{ roomId }}</div>
		<div class="status">{{ status ?? '未住满' }}</div>
		<span class="icon" :style="{ borderBottomColor: status == '已住满' ? '#ccc' : '#00CAED' }"></span>
		<el-icon :size="12">
			<Check />
		</el-icon>

		<!-- 查看宿舍成员对话框 -->
		<el-dialog v-model="dialogTableVisible" width="900">
			<div class="dialog-container">
				<h2 class="title">{{ (build ? build + ' 栋 -' : '') + roomId }} 号寝室详情</h2>
				<el-table
					:data="clacRoomMembers"
					:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
					:row-style="tableRowClassName">
					<el-table-column prop="stuName" label="姓名" />
					<el-table-column label="床位">
						<template #default="{ row }">
							{{ row.bed + '床' }}
						</template>
					</el-table-column>
					<el-table-column prop="stuId" label="学号" />
					<el-table-column prop="profession" label="专业" />
					<el-table-column prop="college" label="专业" />
					<el-table-column prop="phone" label="电话" />
					<el-table-column label="操作" width="200" align="center" v-if="userInfo.stuId">
						<template #default="{ row }">
							<slot name="control" :data="{ row }"></slot>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>


	</div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { getStuOneBuildDor } from '@/utils/axios/master'
import { debounce } from '@/utils/tools'

import { useUserStore } from '@/stores/userStore';

const {userInfo}=useUserStore()
// 接受props
const props = defineProps(['roomId', 'status', 'build'])

//控制对话框的显示或隐藏
const dialogTableVisible = ref(false)



// 查看每某一个房间的成员信息
const roomMembers = ref([])

// 展示寝室成员信息
const clacRoomMembers = computed(() => {
	let bedid = roomMembers.value.reduce((pre, cur) => {
		pre.push(cur.bed)
		return pre
	}, [])

	while (roomMembers.value.length < 6) {
		for (let i = 1; i <= 6; i++) {
			if (!bedid.includes(i)) {
				roomMembers.value.push({
					bed: i,
				})
			}
		}
	}
	return roomMembers.value
})



//----------- 方法---------------

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}



const showRoomMembers = debounce(async () => {
	let { data } = await getStuOneBuildDor({ buildId: props.build, dormitory: props.roomId })
	roomMembers.value = data
	console.log(data,"--");
	dialogTableVisible.value = true

})
</script>

<style scoped lang="scss">
.el-form-item {
	&:deep(.el-form-item__content) {
		justify-content: center;
	}
}

.el-form {
	margin: auto;
}

.title {
	font-size: 20px;
	text-align: center;
}

.container {
	display: flex;
	justify-content: space-between;
	width: 185px;
	padding: 10px;
	background-color: #f8f9fb;
	position: relative;
	transition: 0.5;

	&:hover {
		border-radius: 5px;
		box-shadow: 0px 0 5px 2px #00caed;
	}

	.icon {
		display: block;
		position: absolute;
		top: -15px;
		right: -15px;
		border: 15px transparent solid;
		transform: rotateZ(45deg);
	}

	.el-icon {
		position: absolute;
		top: 0px;
		right: 0px;
		color: #ffff;
	}
}

.id {
	display: flex;
	background-color: #00caed55;
	align-items: center;
	color: #00caed;
	font-size: 18px;
	cursor: pointer;
	padding: 5px;
	border-radius: 10px;
}

.status {
	line-height: 64px;
	width: 100px;
	text-align: center;
}
</style>
